"use client";
import { useCallback, useState, useEffect } from "react";
import { Image } from "antd";
import "./header.css";
import classNames from "classnames";
import { DownOutlined } from "@ant-design/icons";
import { getBusinessCatalogue } from "@/app/api/index";
import React from "react";
import { useRouter, usePathname } from "next/navigation";
export function Header() {
  const [selected, setSelected] = useState("1");
  const [catalogue, setCatalogue] = useState([{
    id:"",
    title:""
  }]);
  const [y, setY] = useState(0);
  const router = useRouter();
  const path = usePathname();
  const scrollTop = useCallback(() => {
    setY(document.documentElement.scrollTop);
  }, []);

  useEffect(() => {
    let param = path?.substring(path.lastIndexOf("/") + 1)
    if(param?.length == 0){
      setSelected("1");
    }else if(param ==="store"){
      setSelected("5");
    }else{
      setSelected(param);
    }
    
    // setSelected();

    getBusinessCatalogue().then((res: any) => {
      setCatalogue(res.data);
    });
    window.addEventListener("scroll", scrollTop);
    return () => {
      window.removeEventListener("scroll", scrollTop);
    };
  }, []);

  const changePage = useCallback((id: string) => {
    setSelected(id);
    if (id.length > 2) {
      // 点击的是业务板块
      router.push(`/dashboard/business/${id}`);
    } else {
      switch (id.charAt(0)) {
        case "1":
          router.push("/");
          break;
        case "2":
          router.push(`/dashboard/introduce/${id}`);
          break;
        case "3":
          router.push(`/dashboard/news/${id}`);
          break;
        case "5":
          router.push(`/dashboard/store/${id}`);
          break;
      }
    }
  }, []);

  return (
    <>
      <div className="w-full pl-[18%] h-[10vh] flex items-center flex-nowrap">
        <Image src="/logo.svg" preview={false} alt="company_logo" />
      </div>
      <div
        className={classNames({
          navigation: y <= 20,
          navigation_after: y > 20,
        })}
      >
        <div
          className={classNames("ml-[18%]", {
            index_navigation_selected: selected === "1",
            index_navigation_select: selected != "1",
          })}
          onClick={() => changePage("1")}
        >
          首页
        </div>
        <div className="dropdown">
          <div
            onClick={() => changePage("21")}
            className={classNames({
              dropbtn_selected:
                selected.charAt(0) === "2" && selected.length < 3,
              dropbtn: selected.charAt(0) !== "2" || selected.length >= 3,
            })}
          >
            集团概况
            <DownOutlined />
          </div>
          <div className="dropdown_content">
            <div
              className={classNames({
                submenu: selected === "21",
              })}
              onClick={() => changePage("21")}
            >
              集团简介
            </div>
            <div
              className={classNames({
                submenu: selected === "26",
              })}
              onClick={() => changePage("26")}
            >
              领导团队
            </div>
            <div
              className={classNames({
                submenu: selected === "22",
              })}
              onClick={() => changePage("22")}
            >
              发展历程
            </div>
            <div
              className={classNames({
                submenu: selected === "23",
              })}
              onClick={() => changePage("23")}
            >
              企业架构
            </div>
            <div
              className={classNames({
                submenu: selected === "24",
              })}
              onClick={() => changePage("24")}
            >
              资质荣誉
            </div>
            <div
              className={classNames({
                submenu: selected === "25",
              })}
              onClick={() => changePage("25")}
            >
              企业文化
            </div>
          </div>
        </div>
        <div className="dropdown">
          <div
            onClick={() => changePage("31")}
            className={classNames({
              dropbtn_selected:
                selected.charAt(0) === "3" && selected.length < 3,
              dropbtn: selected.charAt(0) !== "3" || selected.length >= 3,
            })}
          >
            新闻中心
            <DownOutlined />
          </div>
          <div className="dropdown_content">
            <div
              className={classNames({
                submenu: selected === "31",
              })}
              onClick={() => changePage("31")}
            >
              集团新闻
            </div>
            <div
              className={classNames({
                submenu: selected === "32",
              })}
              onClick={() => changePage("32")}
            >
              集团动态
            </div>
            <div
              className={classNames({
                submenu: selected === "33",
              })}
              onClick={() => changePage("33")}
            >
              集团公告
            </div>
          </div>
        </div>
        <div className="dropdown">
          <div
            onClick={() => changePage(catalogue[0].id)}
            className={classNames({
              dropbtn_selected: selected.length >= 10,
              dropbtn: selected.length < 10,
            })}
          >
            业务板块
            <DownOutlined />
          </div>
          <div className="dropdown_content">
            {catalogue.map((item, index) => {
              return (
                <div
                  key={item.id}
                  className={classNames({ submenu: selected === item.id })}
                  onClick={() => changePage(item.id)}
                >
                  {item.title}
                </div>
              );
            })}
          </div>
        </div>
        <div className="dropdown">
          <div
            onClick={() => changePage("51")}
            className={classNames({
              dropbtn_selected:
                selected.charAt(0) === "5" && selected.length < 3,
              dropbtn: selected.charAt(0) !== "5" || selected.length >= 3,
            })}
          >
            线下门店
            <DownOutlined />
          </div>
          <div className="dropdown_content">
          <div
              className={classNames({
                submenu: selected === "51",
              })}
              onClick={() => changePage("51")}
            >
              运营中心
            </div>
            <div
              className={classNames({
                submenu: selected === "52",
              })}
              onClick={() => changePage("52")}
            >
              健康小屋
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
